<template>
	<a-form :form="form" @submit="handleSubmit">
		<a-form-item label="停课范围" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
			<a-radio-group v-decorator="['scope', {initialValue: 'department'}]">
				<a-radio value="department">按院系</a-radio>
				<a-radio value="grade">按年级</a-radio>
				<a-radio value="class">按班级</a-radio>
				<a-radio value="teacher">按教师</a-radio>
				<a-radio value="custom">自定义选择</a-radio>
			</a-radio-group>
		</a-form-item>

		<a-form-item label="选择范围" :labelCol="{span: 4}" :wrapperCol="{span: 18}"
			v-if="form.getFieldValue('scope') !== 'custom'">
			<a-select v-decorator="['target', {rules: [{required: true, message: '请选择停课范围'}]}]" mode="multiple"
				placeholder="请选择">
				<a-select-option v-for="item in scopeOptions" :key="item.id" :value="item.id">
					{{ item.name }}
				</a-select-option>
			</a-select>
		</a-form-item>

		<a-form-item label="选择课程" :labelCol="{span: 4}" :wrapperCol="{span: 18}"
			v-if="form.getFieldValue('scope') === 'custom'">
			<a-select v-decorator="['courses', {rules: [{required: true, message: '请选择课程'}]}]" mode="multiple"
				placeholder="请选择需要停课的课程">
				<a-select-option v-for="course in allCourses" :key="course.id" :value="course.id">
					{{ course.name }} ({{ course.teacher }} {{ course.time }} {{ course.room }})
				</a-select-option>
			</a-select>
		</a-form-item>

		<a-form-item label="停课日期" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
			<a-range-picker v-decorator="['dateRange', {rules: [{required: true, message: '请选择停课日期范围'}]}]"
				style="width: 100%" />
		</a-form-item>

		<a-form-item label="停课原因" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
			<a-select v-decorator="['reason', {rules: [{required: true, message: '请选择停课原因'}]}]" placeholder="请选择停课原因">
				<a-select-option value="exam">统一考试</a-select-option>
				<a-select-option value="activity">学校活动</a-select-option>
				<a-select-option value="holiday">节假日调整</a-select-option>
				<a-select-option value="other">其他原因</a-select-option>
			</a-select>
		</a-form-item>

		<a-form-item label="详细说明" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
			<a-textarea v-decorator="['description', {rules: [{required: true, message: '请输入详细说明'}]}]"
				placeholder="请详细说明停课原因" :rows="4" />
		</a-form-item>

		<a-form-item label="通知方式" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
			<a-checkbox-group v-decorator="['notifyMethods', {initialValue: ['system']}]">
				<a-checkbox value="system">系统通知</a-checkbox>
				<a-checkbox value="email">邮件通知</a-checkbox>
				<a-checkbox value="sms">短信通知</a-checkbox>
			</a-checkbox-group>
		</a-form-item>

		<a-form-item :wrapperCol="{span: 18, offset: 4}">
			<a-button type="primary" html-type="submit">提交停课</a-button>
			<a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
			<a-button style="margin-left: 10px" @click="handlePreview">预览影响</a-button>
		</a-form-item>

		<!-- 改进预览模态框 -->
		<a-modal :visible="previewVisible" title="停课影响预览" width="800px" @cancel="previewVisible = false" :footer="null">
			<template v-if="previewData">
			<a-descriptions bordered :column="1">
				<a-descriptions-item label="影响课程数">{{ previewData.affectedCourses }}</a-descriptions-item>
				<a-descriptions-item label="影响教师数">{{ previewData.affectedTeachers }}</a-descriptions-item>
				<a-descriptions-item label="影响班级数">{{ previewData.affectedClasses }}</a-descriptions-item>
				<a-descriptions-item label="冲突考试数">
					<a-tag :color="previewData.conflictExams > 0 ? 'red' : 'green'">
						{{ previewData.conflictExams }}
					</a-tag>
				</a-descriptions-item>
			</a-descriptions>

			<a-divider>详细影响</a-divider>

			<a-table :columns="previewColumns" :dataSource="previewData.details" rowKey="date" :pagination="false" />

			<div class="action-buttons" style="margin-top: 20px; text-align: right">
				<a-button @click="previewVisible = false">关闭</a-button>
			</div>
			</template>
		</a-modal>
	</a-form>
</template>

<script>
	export default {
		components: {},
		beforeCreate() {
			this.form = this.$form.createForm(this)
		},
		data() {
			return {
				previewColumns: [{
						title: '日期',
						dataIndex: 'date'
					},
					{
						title: '影响课程数',
						dataIndex: 'courses'
					},
					{
						title: '影响教师数',
						dataIndex: 'teachers'
					},
					{
						title: '影响班级数',
						dataIndex: 'classes'
					}
				],
				scopeOptions: [{
						id: 'cs',
						name: '信息工程系'
					},
					{
						id: 'math',
						name: '机电工程系'
					},
					{
						id: 'physics',
						name: '建筑工程系'
					}
				],
				allCourses: [{
						id: '1',
						name: '高等数学（上）	',
						teacher: '王芳',
						time: '周一 1-2节',
						room: 'bj007'
					},
					{
						id: '2',
						name: 'PLC与工业控制技术',
						teacher: '李廷',
						time: '周二 3-4节',
						room: 'B205'
					}
				],
				previewVisible: false,
				previewData: {
				      affectedCourses: 0,
				      affectedTeachers: 0,
				      affectedClasses: 0,
				      conflictExams: 0,
				      details: []
				    }
			}
		},
		methods: {
			handleSubmit(e) {
				e.preventDefault()
				this.form.validateFields((err, values) => {
					if (!err) {
						console.log('批量停课表单值: ', values)
						this.$emit('submit', values)
					}
				})
			},
			
			handleReset() {
				this.form.resetFields()
			},
			handlePreview() {
				this.form.validateFields((err, values) => {
				    if (!err) {
				      this.previewData = this.generatePreviewData(values) || {
				        affectedCourses: 0,
				        affectedTeachers: 0,
				        affectedClasses: 0,
				        conflictExams: 0,
				        details: []
				      };
				      this.previewVisible = true;
				    }
				  });
			},
			// 改进预览数据生成
			generatePreviewData(formData) {
				const baseData = {
					affectedCourses: 0,
					affectedTeachers: 0,
					affectedClasses: 0,
					conflictExams: 0,
					details: []
				}
			
				// 模拟根据表单数据生成不同的预览结果
				if (formData.scope === 'department') {
					baseData.affectedCourses = 24
					baseData.affectedTeachers = 8
					baseData.affectedClasses = 12
					baseData.conflictExams = 2
					baseData.details = [{
							date: formData.dateRange[0].format('YYYY-MM-DD'),
							courses: 8,
							teachers: 3,
							classes: 5
						},
						{
							date: formData.dateRange[1].format('YYYY-MM-DD'),
							courses: 16,
							teachers: 5,
							classes: 7
						}
					]
				} else if (formData.scope === 'grade') {
					// 其他范围的处理逻辑...
				}
			
				return baseData
			},
		}
	}
</script>